<template>
  <body>
  <!--顶部部分-->
  <div class="top">
    <button id="button_back" @click="toUserCenter" v-show="check"><</button>
    <span id="title">我的收货地址</span>
    <button id="button_add" @click="addAddress" v-show="check">新增</button>
  </div>
  <!--地址列表部分-->
  <div>
    <table cellspacing="0" v-for="address in tableData">
      <tr >
        <td class="td_up">
          <div @click="!check &&toNewOrder(address)">
            <!--在前台不展示地址编号，但是可以获取到-->
            <span v-show="false">地址编号：{{address.aid}}</span>
            <span>{{address.rname}}</span>
            <span>{{address.rphone}}</span>
            <br>
            <span>{{address.raddress}}</span>
          </div>
        </td>
        <td class="td_down" colspan="2">
          <button @click="editAddress(address)" v-show="check">修改</button>
          <button @click="deleteAddressByAid(address.aid)" v-show="check">删除</button>
        </td>
      </tr>
    </table>
  </div>
  </body>
</template>

<script>
  import {getAllAddress, deleteAddress} from '@/api/user'

  export default {
    name: 'UserAllAddress',
    data () {
      return {
        tableData: {},
        address: {
          aid: '',
          rname: '', /*地址中的姓名*/
          rphone: '',  /*地址中的手机号*/
          raddress: '',
        },
        fromPath: "",
        good:{},
        check:true,
      }
    },
    methods: {
      /*获取用户的所有地址信息*/
      getAllAddress () {
        var that = this
        getAllAddress({
          uid: this.$store.state.user.uid //从本地store中获取uid
        }).then((res) => {
          that.tableData = res.data
        }).catch((reason => {
            alert('出错了，请重试')
          })
        )
      },
      /*根据aid删除地址*/
      deleteAddressByAid (aid) {
        deleteAddress({
          aid: aid
        }).then((res) => {
          if (res.data) {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000,
            })
            this.getAllAddress()
          } else {
            this.$message.success('删除失败')
          }
        }).catch((reason => {
            alert('出错了，请重试')
          })
        )
      },

      /*新增地址*/
      addAddress () {
        this.$router.replace('/ChangeAddress')
      },
      /*修改地址*/
      editAddress (address) {
        this.$router.replace({path: '/ChangeAddress', query: {address: address}})
      },
      /*回到用户个人中心*/
      toUserCenter () {
        this.$router.replace('/UserCenter')
      },
      /*回到生成订单页面*/
      toNewOrder(address){
        this.$router.replace({
          path:'/NewOrder',
          query:{
            address:address,
            good:this.good,
            path:this.$route.path,
          }
        })
      },
    },
    created () {
      //如果是从生成订单页面来的，暂存good数据
      if (this.$route.query.path==='/NewOrder'){
        this.good=this.$route.query.good;
        this.check=false;
      }
      this.getAllAddress();
    },
  }
</script>

<style scoped>
  body {
    width: 100%;
    height: 100%;
    background-color: burlywood;
    background-size: 100% 100%;
    background-attachment: fixed;
    z-index: -100;
    position: absolute;
    left: 0;
    top: 0
  }

  table {
    width: 100%;
    padding: 1%;

  }

  tr, td {
    border: 1px solid white;
  }

  span {
    font-size: 30%;
  }

  button {
    font-size: 25%;
    background-color: burlywood;
    border-radius: 15%;
    margin: 1%;
  }

  .td_up {
    text-align: left;
    font-size: 100%;
    width: 80%;
  }


  /*顶部导航栏CSS样式 begin*/
  /*顶部导航栏*/
  .top {
    background-color: bisque;
    font-size: 20px;
    width: 100%;
  }

  /*顶部返回按钮*/
  #button_back {
    float: left;
    font-size: 15px;
  }

  /*顶部文字标题*/
  #title {
    font-size: 25px;
  }

  /*顶部新增按钮*/
  #button_add {
    float: right;
    font-size: 15px;
  }

  /*顶部导航栏CSS样式 end*/
</style>
